<template>
    <div>
        <h2>登录</h2>
        <table>
            <thead>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" v-model="Name"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="text" v-model="Paw"></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="button" value="登录" @click="login"></td>
                </tr>
            </thead>
        </table>
    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
//axios 是一个基于 Promise 的 HTTP 客户端，可在浏览器和 Node.js 环境中使用。
// 其主要作用是发送 HTTP 请求，像 GET、POST、PUT、DELETE 等类型的请求都能发送
import { ref } from 'vue';
//ref 通常用于创建单个值的响应式数据，像数字、字符串、布尔值等
import { useRoute } from 'vue-router';
//useRoute 是一个组合式函数，用于获取当前路由信息。

//定义变量
const router = useRoute();
const Name=ref("");
const Paw=ref("");

const login=()=>{
    axios.get("https://localhost:7034/api/User/GetVipList",{params:{Name:Name.value,Paw:Paw.value}}).then(res=>{
        if(res.data.Id==-1){
            alert("用户不存在");
        }
        else//必须要有else
        if(res.data.Id==-2){
            alert("密码错误");
        }
        else
        if(res.data.Id>0){
            alert("登录成功");
            location.href="/show";
        }
    })
}

</script>

<style scoped>

</style>